<template>
    <div class="commit">
        <van-tabs type="card" @click="onClick">
            <van-tab title="全部">
                <van-card
                    :desc="item.time"
                    :title="item.name"
                    :thumb="item.img" v-for="item in allList" :key="item.id">
                    <div slot="tags" class="tags">
                        <p>{{item.txt}}</p>
                        <img v-if="item.pic" :src="item.pic" alt="点击查看大图" @click="BigImg(item.pic)">
                        <div v-if="item.answer"><van-icon name="smile-comment-o" />商家回复：{{item.answer}}</div>
                    </div>
                </van-card>
            </van-tab>
            <van-tab title="好评">                    
                <van-card
                    :desc="item.time"
                    :title="item.name"
                    :thumb="item.img" v-for="item in goodList" :key="item.id">
                    <div slot="tags" class="tags">
                        <p>{{item.txt}}</p>
                        <img v-if="item.pic" :src="item.pic" alt="点击查看大图" @click="BigImg(item.pic)">
                        <div v-if="item.answer"><van-icon name="smile-comment-o" />商家回复：{{item.answer}}</div>
                    </div>
                </van-card>
            </van-tab>
            <van-tab title="差评">                   
                <van-card
                    :desc="item.time"
                    :title="item.name"
                    :thumb="item.img" v-for="item in shitList" :key="item.id">
                    <div slot="tags" class="tags">
                        <p>{{item.txt}}</p>
                        <img v-if="item.pic" :src="item.pic" alt="点击查看大图" @click="BigImg(item.pic)">
                        <div v-if="item.answer"><van-icon name="smile-comment-o" />商家回复：{{item.answer}}</div>
                    </div>
                </van-card>
            </van-tab>
            <van-tab title="有图">                    
                <van-card
                    :desc="item.time"
                    :title="item.name"
                    :thumb="item.img" v-for="item in picList" :key="item.id">
                    <div slot="tags" class="tags">
                        <p>{{item.txt}}</p>
                        <img v-if="item.pic" :src="item.pic" alt="点击查看大图" @click="BigImg(item.pic)">
                        <div v-if="item.answer"><van-icon name="smile-comment-o" />商家回复：{{item.answer}}</div>
                    </div>
                </van-card>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { apiGetCommit } from '../../api/index'
export default {
    data() {
        return {
            allList: [],
            goodList: [],
            shitList: [],
            picList: [] 
        }
    },
    methods: {
        // 查看大图
        BigImg(pic) {
            ImagePreview([pic]);
        },
        // 获得good列表
        onClick(index, title) {
            switch (title) {
                case '好评':
                    apiGetCommit('good')
                    .then(res => {
                        this.goodList = res.data.data.result
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    break;
                case '差评':
                    apiGetCommit('shit')
                    .then(res => {
                        this.shitList = res.data.data.result
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    break;
                case '有图':
                    apiGetCommit('pic')
                    .then(res => {
                        this.picList = res.data.data.result
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    break;
            }
        }
    },
    created() {
        apiGetCommit('all')
        .then(res => {
            this.allList = res.data.data.result
        })
        .catch(err => {
            console.log(err);
        })
    }
}
</script>

<style lang="less" scoped>
    .commit {
        margin-bottom: 78px;
        .van-card {
            margin: 10px 0;
            background: #fff;
            .van-card__thumb {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
            }
            .van-card__content {
                height: 140px;
                .tags {
                    margin: 1vh;
                    img {
                        margin-top: 10px;
                        width: 40px;
                        height: 40px;
                    }
                    div {
                        display: flex;
                        align-items: center;
                        margin-top: 1vh;
                        padding: 1vh;
                        background: #f1f4f8;
                        i {
                            font-size: 20px;
                        }
                    }
                }
            }
        }
    }
</style>
